import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:short_video_app/entity/home/video_list_entity.dart';
import 'package:short_video_app/utils/asset_util.dart';
import 'package:short_video_app/utils/color_util.dart';
import 'package:short_video_app/utils/navigator_util.dart';
import 'package:short_video_app/ui/widgets/custom_refresh.dart';
import 'package:short_video_app/ui/widgets/custom_gesture.dart';
import 'package:short_video_app/ui/widgets/empty_page.dart';
import 'package:short_video_app/ui/widgets/video_view.dart';
import 'package:short_video_app/ui/pages/home/comment_video_page.dart';
import 'package:short_video_app/view_model/home/recommend_video_list_view_model.dart';

class RecommendVideoListPage extends StatefulWidget {
  const RecommendVideoListPage({Key? key}) : super(key: key);

  @override
  State<RecommendVideoListPage> createState() => _RecommendVideoListPageState();
}

class _RecommendVideoListPageState extends State<RecommendVideoListPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return ChangeNotifierProvider(
      create: (BuildContext context) => RecommendVideoListViewModel(),
      child: Consumer<RecommendVideoListViewModel>(builder: (context, viewModel, child) {
        return CustomRefresh(
          controller: viewModel.refreshController,
          enablePullUp: true,
          onRefresh: () async {
            viewModel.onRefresh();
          },
          onLoading: () async {
            viewModel.onLoading();
          },
          child: _buildContent(viewModel),
        );
      }),
    );
  }

  Widget _buildContent(RecommendVideoListViewModel viewModel) {
    return
      viewModel.datas.isEmpty
        ? const EmptyPage(backgroundColor: ColorsUtil.COLOR_999999,)
        : ListView.builder(
            physics: const PageScrollPhysics(),
            scrollDirection: Axis.vertical,
            itemCount: viewModel.datas.length,
            itemBuilder: (BuildContext context, int index) {
              VideoEntity entity = viewModel.datas[index];
              return Container(
                color: ColorsUtil.COLOR_999999,
                height: MediaQuery.of(context).size.height - kBottomNavigationBarHeight - 10,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    VideoView(
                      url: entity.videoUrl ?? "",
                      cover: entity.imgUrl ?? "",
                    ),
                    Positioned(
                      left: 0,
                      right: 40,
                      bottom: 0,
                      child: _buildPageBottomContent(viewModel, index),
                    ),
                    Positioned(
                      right: 20,
                      bottom: 20,
                      child: _buildPageRightContent(viewModel, index),
                    ),
                  ],
                ),
              );
            },
        );
  }

  /// PageView 底部内容
  Widget _buildPageBottomContent(RecommendVideoListViewModel viewModel, int index) {
    VideoEntity entity = viewModel.datas[index];
    return Container(
      height: 120,
      padding: const EdgeInsets.all(20),
      color: ColorsUtil.COLOR_FFFFFF.withOpacity(0.01),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            entity.nickName ?? "",
            style: const TextStyle(fontSize: 14, color: ColorsUtil.COLOR_FFFFFF),
          ),
          const SizedBox(height: 8),
          Text(
            entity.title ?? "",
            style: const TextStyle(fontSize: 14, color: ColorsUtil.COLOR_FFFFFF),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }

  /// PageView 右边内容
  Widget _buildPageRightContent(RecommendVideoListViewModel viewModel, int index) {
    VideoEntity entity = viewModel.datas[index];
    return Column(
      children: [
        _buildOperationOption(
          viewModel,
          iconName: "follow",
          onPressed: () {
            viewModel.follow(context, entity);
          },
        ),
        const SizedBox(height: 15),
        _buildOperationOption(
          viewModel,
          iconName: entity.isLike == 1 ? 'liked' : 'like',
          number: "${entity.likesCount}",
          onPressed: () {
            viewModel.like(context, entity, index);
          },
        ),
        const SizedBox(height: 15),
        _buildOperationOption(
          viewModel,
          iconName: "comment",
          number: "${entity.commentCount}",
          onPressed: () {
            _buildComment(viewModel, index);
          },
        ),
        const SizedBox(height: 15),
        _buildOperationOption(
          viewModel,
          iconName: "forward",
          onPressed: () {
            viewModel.forward(context, entity);
          },
        ),
      ],
    );
  }

  /// 评论 Sheet
  Future _buildComment(RecommendVideoListViewModel viewModel, int index) {
    VideoEntity entity = viewModel.datas[index];
    return showModalBottomSheet(
        context: context,
        elevation: 15,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          )
        ),
        builder: (context) {
          return Container(
            padding: const EdgeInsets.all(15),
            child: Stack(
              children: [
                Column(
                  children: [
                    const Center(
                      child: Text('评论', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: ColorsUtil.COLOR_333333)),
                    ),
                    const SizedBox(height: 15),
                    Expanded(
                      child: CommentVideoPage(entity: entity),
                    ),
                    const SizedBox(height: 15),
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            height: 32,
                            padding: const EdgeInsets.only(left: 15, right: 15, top: 10),
                            decoration: BoxDecoration(
                              borderRadius: const BorderRadius.all(Radius.circular(16)),
                              border: Border.all(color: ColorsUtil.COLOR_DBDBDB, width: 0.5, style: BorderStyle.solid),
                            ),
                            child: TextField(
                              keyboardType: TextInputType.text,
                              style: const TextStyle(fontSize: 16, color: ColorsUtil.COLOR_333333),
                              controller: viewModel.commentController,
                              cursorHeight: 16,
                              cursorColor: ColorsUtil.COLOR_666666,
                              decoration: const InputDecoration(
                                border: InputBorder.none,
                                hintText: '请输入评论',
                                hintStyle: TextStyle(fontSize: 16, color: ColorsUtil.COLOR_999999),
                              ),
                            ),
                          )
                        ),
                        const SizedBox(width: 15),
                        GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {
                            viewModel.commentVideo(context, entity.id);
                          },
                          child: Container(
                            width: 80,
                            height: 32,
                            alignment: Alignment.center,
                            decoration: const BoxDecoration(
                              color: ColorsUtil.COLOR_FF5C5C,
                              borderRadius: BorderRadius.all(Radius.circular(20)),
                            ),
                            child: const Text("发布", style: TextStyle(fontSize: 16, color: ColorsUtil.COLOR_FFFFFF))
                          )
                        ),
                      ],
                    ),
                  ],
                ),
                Positioned(
                  right: 0,
                  top: 5,
                  child: GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      NavigatorUtil.pop(context);
                    },
                    child: AssetUtil.svgImage('home/close', size: const Size(20, 20), color: ColorsUtil.COLOR_666666),
                  )
                )
              ],
            ),
          );
        }
    );
  }

  Widget _buildOperationOption(RecommendVideoListViewModel viewModel, {
    required String iconName,
    String? number,
    Color? color,
    Function? onPressed,
  }) {
    return CustomGesture(
      child: Column(
        children: [
          iconName == 'liked'
            ? AssetUtil.svgImage("home/$iconName", size: const Size(28, 28), color: ColorsUtil.COLOR_FF5C5C,)
            : AssetUtil.svgImage("home/$iconName",
                size: const Size(28, 28),
                color: color ?? ColorsUtil.COLOR_FFFFFF,
              ),
          const SizedBox(height: 4),
          number == null
              ? Container()
              : Text(number, style: const TextStyle(fontSize: 13, color: ColorsUtil.COLOR_FFFFFF),),
        ],
      ),
      behavior: HitTestBehavior.opaque,
      onTap: () {
        onPressed?.call();
      },
    );
  }
}
